<!--
 * @Descripttion:展示商品列表组件 
 * @Author: congz
 * @Date: 2020-06-04 11:22:40
 * @LastEditors: congz
 * @LastEditTime: 2020-08-05 15:44:31
-->

<template>
	<div id="myList" class="myList">
		<ul>
			<li v-for="(item,index) in list" :key="index">
				<router-link :to="{ path: '/goodsDetails', query: {productID:item.id} }">
					<!-- <img :src="item.img_path" alt /> -->
					<!-- <img v-lazy="'../assets/imgs/placeholder.png'" alt/> -->
					<!-- <img src="../assets/imgs/placeholder.png" alt /> -->
					<img :src="randomImg()" />
					<h2>{{item.name}}</h2>
					<h3>{{item.title}}</h3>
					<p>
						<span>{{currency(item.price).multiply(0.7)}}元</span>
						<span v-show="item.price != item.price*0.7" class="del">{{currency(item.price)}}元</span>
					</p>
				</router-link>
			</li>
			<li v-show="isMore && list.length>=1" id="more">
				<router-link :to="{path: '/goods'}">
					浏览更多
					<i class="el-icon-d-arrow-right"></i>
				</router-link>
			</li>
		</ul>
	</div>
</template>
<script>
	export default {
		name: 'MyList',
		// list为父组件传过来的商品列表
		// isMore为是否显示“浏览更多”
		props: ['list', 'isMore', 'isDelete'],
		data() {
			return {}
		},
		computed: {
			// 通过list获取当前显示的商品的分类ID，用于“浏览更多”链接的参数
		},
		methods: {

		}
	}
</script>
<style scoped>
	.myList ul li {
		z-index: 1;
		float: left;
		width: 234px;
		height: 280px;
		padding: 10px 0;
		margin: 0 0 14.5px 13.7px;
		background-color: white;
		-webkit-transition: all 0.2s linear;
		transition: all 0.2s linear;
		position: relative;
	}

	.myList ul li:hover {
		z-index: 2;
		-webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
		box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
		-webkit-transform: translate3d(0, -2px, 0);
		transform: translate3d(0, -2px, 0);
	}

	.myList ul li img {
		display: block;
		width: 160px;
		height: 160px;
		background: url(../assets/imgs/placeholder.png) no-repeat 50%;
		margin: 0 auto;
	}

	.myList ul li h2 {
		margin: 25px 10px 0;
		font-size: 14px;
		font-weight: 400;
		color: #333;
		text-align: center;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.myList ul li h3 {
		margin: 5px 10px;
		height: 18px;
		font-size: 12px;
		font-weight: 400;
		color: #b0b0b0;
		text-align: center;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.myList ul li p {
		margin: 10px 10px 10px;
		text-align: center;
		color: #ff6700;
	}

	.myList ul li p .del {
		margin-left: 0.5em;
		color: #b0b0b0;
		text-decoration: line-through;
	}

	.myList #more {
		text-align: center;
		line-height: 280px;
	}

	.myList #more a {
		font-size: 18px;
		color: #333;
	}

	.myList #more a:hover {
		color: #ff6700;
	}

	.myList ul li .delete {
		position: absolute;
		top: 10px;
		right: 10px;
		display: none;
	}

	.myList ul li:hover .delete {
		display: block;
	}

	.myList ul li .delete:hover {
		color: #ff6700;
	}
</style>
